@extends('layouts.back_stage')
@section('content')
    <style>
        /* .container{background:#fff;margin-top:30px} */
        #app{padding:20px}
        [v-cloak] {display: none;}
        .tableBg{padding:30px;background:#fff;}
        .touching{margin-left:10px;float:right;margin-bottom: 15px;}
        .input-info{width:90%;}
    </style>
    <div class="container">
        <div style="padding:20px 20px 20px 0;overflow:hidden;"><h3 style="float:left;">类型管理</h3></div>
        <!-- 主体-->
        <div class="page-body">
            <div class="row app" id="app" v-cloak>
                <div class="col-md-12 row row-table-box">
                    <div class="tableBg" style="margin-top:10px;">
                        <el-tabs v-model="activeName2" type="border-card" @tab-click="handleClick">
                            <el-tab-pane label="发货类型" name="first">
                                <el-button type="primary" class="touching" @click="addDeliver" size="small">添加</el-button>
                                <el-table :data="sendData" border size='mini' style="width: 100%">
                                    <el-table-column type="index" align="center"  :resizable='false' label="序号" width="50"> </el-table-column>
                                    <el-table-column prop="name" label="发货类型" :resizable='false' align="center"  ></el-table-column>
                                    <el-table-column fixed="right" label="操作"  :resizable='false' align="center"  width="100">
                                        <template slot-scope="scope">
                                            <el-button  type="text" @click="Updata(scope)" size="small">修改</el-button>
                                            <el-button type="text" @click="remove(scope)" size="small">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane label="退货类型" name="second">
                                <el-button type="primary" class="touching" @click="quitAdd" size="small">添加</el-button>
                                <el-table :data="quitData" border size='mini' style="width: 100%">
                                    <el-table-column type="index" align="center"  :resizable='false' label="序号" width="50"> </el-table-column>
                                    <el-table-column prop="name" label="退货类型" :resizable='false' align="center"  ></el-table-column>
                                    <el-table-column fixed="right" label="操作"  :resizable='false' align="center"  width="100">
                                        <template slot-scope="scope">
                                            <el-button  type="text" @click="quitEdit(scope)" size="small">修改</el-button>
                                            <el-button type="text" @click="quitDel(scope)" size="small">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
                <el-dialog title="发货类型信息" :visible.sync="sendBox" width="30%">
                    <el-form :model="sendAct" width="500">
                        <el-form-item label="发货类型" label-width="100px">
                            <el-input v-model.trim="sendAct.mod_name" maxlength="10" placeholder="请输入发货类型" class="input-info" size="small"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="sendBox = false" size="small">取 消</el-button>
                        <el-button type="primary" @click="Added" size="small">确 定</el-button>
                    </div>
                </el-dialog>

                <el-dialog title="退货类型信息" :visible.sync="quitBox" width="30%">
                    <el-form :model="quitAct" width="500">
                        <el-form-item label="退货类型" label-width="100px">
                            <el-input v-model.trim="quitAct.quit_name" maxlength="10" placeholder="请输入退货类型" class="input-info" size="small"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="quitBox = false" size="small">取 消</el-button>
                        <el-button type="primary" @click="quitSure" size="small">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
        <!-- /主体-->
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    activeName2: 'first',

                    sendData: [],
                    sendBox:false,
                    sendId:'',
                    sendAct:{
                        mod_name:'',//发货类型
                    },

                    quitData:[],
                    quitBox:false,
                    quitId:'',
                    quitAct:{
                        quit_name:'',//退货类型
                    },
                }
            },
            methods: {
                handleClick(tab, event) {
                    if(tab.name=='first'){
                        this.grabble1();
                    }else if(tab.name=='second'){
                        this.grabble2();
                    }
                },
                //发货类型表格数据
                grabble1(){
                    let that=this;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type:'get',
                        url:'/deliver/index'
                    }).then(function(res){
                        that.sendData=res.content
                    })
                },
                //添加发货类型
                addDeliver(){
                    this.sendBox=true;
                    this.sendAct.mod_name='';
                    this.sendId='';
                },
                //修改发货类型
                Updata(scope){
                    this.sendBox=true;
                    this.sendAct.mod_name=scope.row.name;
                    this.sendId=scope.row.id;
                },
                //发货类型确定
                Added(){
                    let that=this;
                    if(this.sendAct.mod_name==''){
                        that.$notify.error({
                            title: '提示',
                            message: "请输入发货类型",
                        });
                        return false;
                    }
                    var moder=/^[\u4e00-\u9fa5]{0,}$/;
                    if(!moder.test(this.sendAct.mod_name)){
                        this.$notify.error({
                            title: '提示',
                            message: '请输入中文名称',
                        });
                        return false;
                    }
                    if(this.sendId==''){
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                            },
                            type:'post',
                            url:'/deliver/store',
                            data:{
                                name:this.sendAct.mod_name
                            },
                        }).then(function(res){
                            if(res.result.success==true){
                                that.sendBox=false;
                                that.grabble1();
                                that.$notify.success({
                                    title: '提示',
                                    message: '操作成功',
                                });
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: res.result.errorMsg,
                                });
                            }

                        })
                    }else{
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                            },
                            type:'post',
                            url:'/deliver/update/',
                            data:{
                                name:this.sendAct.mod_name,
                                id:this.sendId
                            },
                        }).then(function(res){
                            if(res.result.success==true){
                                that.sendBox=false;
                                that.grabble1();
                                that.$notify.success({
                                    title: '提示',
                                    message: '操作成功',
                                });
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: res.result.errorMsg,
                                });
                            }

                        })
                    }
                },
               //删除发货类型
                remove(scope){
                    let that=this;
                    this.$confirm('是否删除该发货类型?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                            },
                            type:'post',
                            url:'/deliver/delete',
                            data:{
                                id:scope.row.id,
                            }
                        }).then(function(res){
                            that.grabble1();
                            that.$notify.success({
                                title: '提示',
                                message: '删除成功',
                            });
                        })
                    }).catch(() => {

                    });
                },

                //退货类型表格数据
                grabble2(){
                    let that=this;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type:'post',
                        url:'/distribute/returntype/index'
                    }).then(function(res){
                        that.quitData=res.content
                    })
                },
                //添加退货类型
                quitAdd(){
                    this.quitBox=true;
                    this.quitAct.quit_name='';
                    this.quitId='';
                },
                //修改退货类型
                quitEdit(scope){
                    this.quitBox=true;
                    this.quitAct.quit_name=scope.row.name;
                    this.quitId=scope.row.id;
                },
                //退货类型确定
                quitSure(){
                    let that=this;
                    if(this.quitAct.quit_name==''){
                        that.$notify.error({
                            title: '提示',
                            message: "请输入退货类型",
                        });
                        return false;
                    }
                    var moder=/^[\u4e00-\u9fa5]{0,}$/;
                    if(!moder.test(this.quitAct.quit_name)){
                        this.$notify.error({
                            title: '提示',
                            message: '请输入中文名称',
                        });
                        return false;
                    }
                    if(this.quitId==''){
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                            },
                            type:'post',
                            url:'/distribute/returntype/store',
                            data:{
                                name:this.quitAct.quit_name
                            },
                        }).then(function(res){
                            if(res.result.success==true){
                                that.quitBox=false;
                                that.grabble2();
                                that.$notify.success({
                                    title: '提示',
                                    message: '操作成功',
                                });
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: res.result.errorMsg,
                                });
                            }

                        })
                    }else{
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                            },
                            type:'post',
                            url:'/distribute/returntype/update',
                            data:{
                                name:this.quitAct.quit_name,
                                id:this.quitId
                            },
                        }).then(function(res){
                            if(res.result.success==true){
                                that.quitBox=false;
                                that.grabble2();
                                that.$notify.success({
                                    title: '提示',
                                    message: '操作成功',
                                });
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: res.result.errorMsg,
                                });
                            }

                        })
                    }
                },
                //删除退货类型
                quitDel(scope){
                    let that=this;
                    this.$confirm('是否删除该退货类型?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                            },
                            type:'post',
                            url:'/distribute/returntype/delete',
                            data:{
                                id:scope.row.id,
                            }
                        }).then(function(res){
                            that.grabble2();
                            that.$notify.success({
                                title: '提示',
                                message: '删除成功',
                            });
                        })
                    }).catch(() => {

                    });
                },
            },
            mounted() {
                this.grabble1();
            },
        })
  </script>
@endsection